$bar-size= 25px

// the rotated label trick, see: https://gist.github.com/aiboy/7406727
.side-bar {
  display: flex;
  noSelect();

  &.left, &.right {
    width: $bar-size;
    flex-direction: column;
    .side-bar-label {
      padding: 5px 4px;
      text-align right;
    }
  }
  &.right {
    .side-bar-label {
      padding: 5px 2px;
    }
  }
  &.top, &.bottom {
    height: $bar-size;
    flex-direction: row;
    .side-bar-label {
      padding-lr: 5px;
      text-align center;
    }
  }

  .side-bar-label {
    cursor: pointer;
    overflow: hidden;
    &:hover {
      background-color: gray(95%);
    }
    &.active {
      background-color: gray(90%);
    }
  }

  &.top, &.bottom {
    .side-bar-label-container {
      display: flex;
      align-items: center;
      height: 100%;
    }
  }

  &.left, &.right {
    .side-bar-label-container {
      display: inline-block;
      white-space: nowrap;
      transform: translate(0.8em, -0.5em) rotate(90deg);
      transform-origin: 0 0.5em;
      &:before {
        // this is the key, it keeps the box from collapse
        content: "";
        float: right;
        margin-bottom: 100%;
      }
    }
  }

  .side-bar-label-content {
    display: flex;
    line-height: 1;
    align-items: center;
    .icon {margin-right: 4px}
  }

  &.left .side-bar-label-content {
    transform: rotate(180deg);
  }

}

